<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>matrix</title>
  <style>

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90vh;
    }

    .box {
      width: 200px;
      height: 200px;
      background: blueviolet;
      transition: all .5s ease-in-out;
    }

  </style>
</head>
<body>

  <div class="box"></div>

  <!--

  1 0 0    x       a c e     x
  0 1 0 *  y   =>  b d f  *  y
  0 0 1    1       0 0 1  *  1

  ax + cy + e = x^
  bx + dy + f = y^

  1. 平移 e, f
  x移动10 ax + cy + e = 10 => [ 1 0 0 1 10 0 ]

  2. 放大 a, d
  x放大2  ax + cy + e = 2x => [ 2 0 0 1 0 0 ]

  3. 旋转
  cosR  -sinR  0       x      x*cosR - y*sinR
  sinR  cosR   0   *   y  =>  x*sinR + y*cosR
  0     0      1       1             1

  [ Math.cos(R), Math.sin(R), -Math.sin(R), Math.cos(R) ]


  -->
  <!--

    3D



   -->
  <script>
    var a = [
      1.2, 0,
      0, 1.2,
      50, 0
    ]

    var box = document.querySelector('.box')

    var r = Math.PI/180 * 30

    a[0] = Math.cos(r)
    a[1] = Math.sin(r)
    a[2] = -Math.sin(r)
    a[3] = Math.cos(r)

    setTimeout(() => {

      box.style.transform = `matrix(${ a.join(', ') })`

    }, 1000)
  </script>
</body>
</html>
